<div class="{{class | default: 'custom_nav nav_type1'}}" id="{{id | default: 'custom_nav'}}" style="--menu-color:{{menu_color}};--height: {{height}};--bg: {{bg_color}};">
  <ul>
    {% if header_nav.size > 0 %}
      {% for item in header_nav.nav_item %}
        <li class="nav-li">
          {% if item.children %}
            <span>
              <a class="nav-li-a" style="color:{{item.setting_json.color}};font-style:{{item.setting_json.style}};font-weight:{{item.setting_json.bold}};text-decoration:{{item.setting_json.decoration}};" target="{{item.setting_json.open | default : '_self' }}" {% if item.setting_json.model != 1 %}rel="external nofollow"{% endif %} href="{{item.url_json.url | default:'javascript:void(0)' }}">
                         {% if item.src %}
                          <header-nav-img>{% include 'lazy_img',src: item.src,alt: '' %}{{item.nav_item_name}}</header-nav-img>
                         {% else %}
                          {{item.nav_item_name}}
                         {% endif %}
                       </a>
              <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-caret" viewBox="0 0 10 6">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor">
              </path></svg>
            </span>

            <div class="nav-child">
              <div class="nav_container_wrapper">
                {% for el in item.children %}
                  {% if el.children %}
                    <dl>
                      <dt>
                        <a  style="color:{{el.setting_json.color}};font-style:{{el.setting_json.style}};font-weight:{{el.setting_json.bold}};text-decoration:{{el.setting_json.decoration}};" target="{{el.setting_json.open | default : '_self' }}" {% if el.setting_json.model != 1 %}rel="external nofollow"{% endif %} href="{{el.url_json.url | default:'javascript:void(0)' }}">
                         {% if el.src %}
                          <header-nav-img>{% include 'lazy_img',src: el.src,alt: '' %}{{el.nav_item_name}}</header-nav-img>
                         {% else %}
                          {{el.nav_item_name}}
                         {% endif %}
                       </a>
                      </dt>
                      {% for ddItem in el.children %}
                        <dd>
                          <a  style="color:{{ddItem.setting_json.color}};font-style:{{ddItem.setting_json.style}};font-weight:{{ddItem.setting_json.bold}};text-decoration:{{ddItem.setting_json.decoration}};" target="{{ddItem.setting_json.open | default : '_self' }}" {% if ddItem.setting_json.model != 1 %}rel="external nofollow"{% endif %} href="{{ddItem.url_json.url | default:'javascript:void(0)' }}">
                         {% if ddItem.src %}
                          <header-nav-img>{% include 'lazy_img',src: ddItem.src,alt: '' %}{{ddItem.nav_item_name}}</header-nav-img>
                         {% else %}
                          {{ddItem.nav_item_name}}
                         {% endif %}
                       </a>
                        </dd>
                      {% endfor %}
                    </dl>
                  {% else %}
                    <dl>
                      <dt>
                        <a  style="color:{{el.setting_json.color}};font-style:{{el.setting_json.style}};font-weight:{{el.setting_json.bold}};text-decoration:{{el.setting_json.decoration}};" target="{{el.setting_json.open | default : '_self' }}" {% if el.setting_json.model != 1 %}rel="external nofollow"{% endif %} href="{{el.url_json.url | default:'javascript:void(0)' }}">
                         {% if el.src %}
                          <header-nav-img>{% include 'lazy_img',src: el.src,alt: '' %}{{el.nav_item_name}}</header-nav-img>
                         {% else %}
                          {{el.nav_item_name}}
                         {% endif %}
                       </a>
                      </dt>
                    </dl>
                  {% endif %}
                {% endfor %}
              </div>

            </div>
          {% else %}
            <span>
              <a class="nav-li-a" style="color:{{item.setting_json.color}};font-style:{{item.setting_json.style}};font-weight:{{item.setting_json.bold}};text-decoration:{{item.setting_json.decoration}};" target="{{item.setting_json.open | default : '_self' }}" {% if item.setting_json.model != 1 %}rel="external nofollow"{% endif %} href="{{item.url_json.url | default:'javascript:void(0)' }}">
                         {% if item.src %}
                          <header-nav-img>{% include 'lazy_img',src: item.src,alt: '' %}{{item.nav_item_name}}</header-nav-img>
                         {% else %}
                          {{item.nav_item_name}}
                         {% endif %}
                       </a>
            </span>
          {% endif %}
        </li>
      {% endfor %}

    {% else %}
      <li class="nav-li">
        <span>
          <a class="nav-li-a" href="/">Home</a>
        </span>
      </li>
      <li class="nav-li">
        <span>
          <a class="nav-li-a" href="/">Woman</a>
        </span>
      </li>
      <li class="nav-li">
        <span>
          <a class="nav-li-a" href="/">New</a>
        </span>
      </li>
      <li class="nav-li">
        <span>
          <a class="nav-li-a" href="/">Tops</a>
        </span>
      </li>
      <li class="nav-li">
        <span>
          <a class="nav-li-a" href="/">Dresses</a>
        </span>
      </li>
      <li class="nav-li">
        <span>
          <a class="nav-li-a" href="/">Sale</a>
        </span>
      </li>
    {% endif %}
  </ul>
</div>